<template>
  <h1>table-follow-组件</h1>
  <!-- <f-table-follow :columns="columns" :query="apiQuery" @change="handleChange">
    <f-button>打开跟随表格</f-button>
  </f-table-follow>
  <f-table-follow
    ref="tableFollowRefA"
    class="s-h400"
    :columns="columns"
    :query="apiQuery"
    @change="handleChange">
    <f-input class="w200" @input="$refs.tableFollowRefA.search()" placeholder="请输入搜索内容A" />
    <template #detail="{ row }">
      <h3>插槽：业务传入</h3>
      <pre>{{ row }}</pre>
    </template>
  </f-table-follow>
  <f-table-follow
    ref="tableFollowRef"
    class="s-h400"
    :columns="columns"
    :query="apiQuery"
    :forms="fields"
    @change="handleChange">
    <f-input
      v-model:value="searchInput"
      class="w300"
      @input="handleInput"
      placeholder="请输入搜索内容B" />
    <template #detail="{ row }">
      <div class="w200 bg-primary">
        <h3>插槽：业务传入</h3>
        {{ row }}
      </div>
    </template>
  </f-table-follow> -->

  <f-tooltip ref="tooltip" trigger="click" v-model:visible="visible" @visibleChange="handleVChange">
    <button>show{{ visible }}</button>
    <template #title> Kjfdlsafsd </template>
  </f-tooltip>
  <f-table-follow
    inputNodeLabel="name"
    class="w800 h600"
    v-model:value="searchInput"
    :columns="columns"
    :query="apiQuery"
    @change="handleChange"
    placeholder="请输入搜索内容C" />

  {{ searchInput }}
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { http } from '../../packages/utils';
const visible = ref(false);
const tableFollowRef = ref();
const tooltip = ref();
console.log(tooltip);
const handleVChange = (v) => {
  console.log('visible change: ', v);
};
// const searchInput = ref();
// const searchInput = ref({ name: 'KK', code: 1 });
const searchInput = ref([
  { name: 'AA', code: 1 },
  { name: 'BB', code: 2 }
]);

const apiQuery = (page, queryParams) => {
  Object.assign(queryParams, page, {});
  return new Promise((resolve) => {
    console.log('request: api');
    setTimeout(() => {
      resolve({
        data: [
          { name: 'AA', code: 1 },
          { name: 'BB', code: 2 }
        ]
      });
    }, 80);
  });
};

const fields = ref([{ field: 'field', type: 'input' }]);

const columns = [
  { type: 'seq', width: 60, fixed: 'left' },
  { field: 'name', title: '名称', minWidth: 180, fixed: 'left' },
  { field: 'code', title: '编码' },
  { field: 'spec', title: '规格' },
  { field: 'doseType', title: '剂型' },
  { field: 'minPackUnit', title: '最小包装单位' },
  { field: 'insuCode', title: '医保目录编码' },
  { field: 'insuName', title: '医保目录名称' },
  { field: 'itemGrade', title: '医保收费等级' },
  { field: 'spuName', title: 'spu名称' },
  { field: 'isBase', title: '是否基药' },
  { field: 'isFeeItem', title: '是否收费项目' },
  { field: 'isSpecialControl', title: '是否特管' },
  { field: 'placeOrigin', title: '产地属性' },
  { field: 'price', title: '价格' },
  { field: 'producer', title: '生产商' },
  // { field: 'productId', title: 'productId' },
  { field: 'regNo', title: '批准文号' },
  { field: 'url', title: '图片' }
];

const handleChange = (e) => {
  console.log('handleChange', e);
  // searchInput.value = e;
};

const handleInput = () => {
  tableFollowRef.value.search();
};

watch(
  () => searchInput.value,
  (val) => {
    console.log('watch:A', val);
  }
);
</script>
<style>
.h800 {
  height: 800px;
}
</style>
